<template>
  <div class="cantainer">
    <div class="title">
      <div class="titleImg">
        <img :src="userImg" alt="" />
      </div>
      <div class="userName">{{ userName }}</div>
      <!-- <div class="titButton" @click="toShopowner"><van-icon name="shop-o" size="18" style="margin-right: 3px" />申请店长</div> -->
      <div class="tcButton" @click="outSign"><img src="../../assets/icon13.png" alt=""> 退出登录</div>
    </div>
    <div class="panel">
      <div
        class="content"
        v-for="(item, index) in titleData"
        :key="index"
        @click="ontotal(index)"
      >
        <div class="text">{{ item.num }}</div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="option">
      <van-cell
        v-for="(item, index) in cellData"
        :key="index"
        :title="item.title"
        :icon="item.icon"
        size="500"
        is-link
        :to="item.url"
      />
    </div>
  </div>
</template>

<script>
import { getUserInfo, getTongJiInfo } from "../../api/api";
import img from "../../assets/img4.png";
import icon1 from "../../assets/icon3.png";
import icon2 from "../../assets/icon4.png";
import icon3 from "../../assets/icon5.png";
import icon4 from "../../assets/icon6.png";
import icon5 from "../../assets/icon2.png";
import icon6 from "../../assets/icon12.png";
export default {
  data() {
    return {
      userImg: "",
      titleData: [
        {
          name: "总业绩",
          num: "",
        },
        {
          name: "直推人数",
          num: "",
        },
        {
          name: "团队人数",
          num: "",
        },
        {
          name: "佣金",
          num: "",
        },
      ],
      cellData: [
        {
          title: "抢购记录",
          icon: icon1,
          url: "/snapUp",
        },
        {
          title: "我的商品",
          icon: icon2,
          url: "/myCom",
        },
        {
          title: "我的钱包",
          icon: icon3,
          url: "/wallet",
        },
        {
          title: "我的团队",
          icon: icon4,
          url: "/team",
        },
        {
          title: "二维码分享",
          icon: icon5,
          url: "/invitation",
        },
        {
          title: "收货地址",
          icon: icon6,
          url: "/address",
        },
      ],
      userName: "",
      money: "",
    };
  },
  methods: {
    toShopowner() {
      this.$router.push("/shopowner");
    },
    getUser(e) {
      let data = {
        user_id: localStorage.getItem("userId"),
      };
      getUserInfo(data).then((res) => {
        this.$toast.clear();
        this.userName = res.data.username;
        this.money = res.data.money;
        this.userImg = res.data.avatar || img;
        console.log("获取用户信息接口---", res.data);
      });
      getTongJiInfo(data).then((res) => {
        this.$toast.clear();
        this.titleData[0].num = res.data.zyjnum.toFixed(2);
        this.titleData[1].num = res.data.ztnum;
        this.titleData[2].num = res.data.tdnum;
        this.titleData[3].num = res.data.yongjin;
        console.log("数据统计接口---", res.data);
      });
    },
    ontotal(index) {
      if (index == 0) this.$router.push("/total");
      if (index == 2) this.$router.push("/team");
      
    },
    outSign() {
      localStorage.removeItem("userInfo");
      localStorage.removeItem("userId");
      localStorage.removeItem("beginDate");
      localStorage.removeItem("endDate");
      localStorage.removeItem("config");
      localStorage.removeItem("token");
      this.$router.push("/login");
      this.$toast.fail("您已退出登录");
    },
  },
  mounted() {
    this.getUser();
  },
};
</script>

<style lang="less" scoped>
.cantainer {
  padding-bottom: 10px;
  .title {
    width: 100%;
    height: 35vh;
    overflow: auto;
    background-image: url("../../assets/image4.png");
    background-position: left top;
    background-size: 100% 110%;
    background-clip: contain;
    background-repeat: no-repeat;

    .titleImg {
      width: 100px;
      height: 100px;
      border-radius: 100%;
      overflow: hidden;
      border: 3px solid #fff;
      margin: 6rem auto 0;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .userName {
      font-size: 1em;
      letter-spacing: 1px;
      color: #fff;
      text-align: center;
      margin-top: 10px;
    }
    .titButton {
      width: 80px;
      border-radius: 5px;
      color: #fff;
      font-size: 1em;
      text-align: center;
      position: absolute;
      top: 30px;
      left: 30px;
      height: 30px;
      letter-spacing: 1px;
      font-size: .55rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tcButton {
      width: 80px;
      border-radius: 5px;
      color: #fff;
      font-size: 1em;
      text-align: center;
      line-height: 30px;
      position: absolute;
      top: 30px;
      right: 30px;
      height: 30px;
      letter-spacing: 1px;
      font-size: .55rem;

      img {
        width: 15px;
        height: 15px;
      }
    }
  }
  .panel {
    width: 100%;
    height: 80px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 5px 5px #aaa4a4;
    // margin-left: 7.5%;
    // margin-top: -40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .content {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .text {
        font-size: 1.2em;
        font-weight: 700;
      }
      .name {
        font-size: 0.7em;
        color: #999999;
        margin-top: 5px;
      }
    }
  }
  .option {
    margin-top: 20px;
    padding-bottom: 80px;

    /deep/ .van-cell {
      line-height: 30px;
    }

    /deep/ .van-cell__title {
      color: #333333;
      font-size: 0.9em;
      letter-spacing: 1px;
      margin-left: 5px;
    }
  }
}
</style>